<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
/*			background-color: black;*/
		}
		.box{
			width: 0px;
			height: 0px;

			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-top: 50px solid red;
/*			transparent 颜色 透明*/

			background-color: orange;
/*			background-image: url("../image/7.gif");*/
			background-size: cover;
			position: absolute;
/*			animation: one 30s linear 2s 1 alternate backwards;*/
/*			animation: a b c d e f g h;*/
/*			a 关键帧动画的名字 （必须写，不能省略） animation-name*/
/*			b 动画完成需要的时间（必须写）animation-duration*/
/*			c 动画执行的效果   animation-timing-function*/
/*			ease 由慢到快 再到慢*/
/*			linear 匀速执行*/
/*			d 动画开始前的延迟时间 单位 s 秒  animation-delay*/
/*			e 动画播放的次数 默认为 1 也可以写入数字 或者 用 关键字 infinite 无限次  animation-iteration-count*/
/*			f 设置动画播放的 方向 reverse 永远反向播放 alternate 奇数次正向播放 偶数次反向播放  animation-direction*/
/*			g 设置动画播放结束后的效果（位置） forwards 动画结束后停留在 最后一帧  backwards 动画播放结束后 回到第一帧  both 即执行第一帧也停留在最后一帧  animation-fill-mode*/
/*			h 设置动画暂停与播放 paused 暂停 running 播放  animation-play-state*/

		}

/*		关键帧*/
/*		创建关键帧动画*/
/*		@keyframes 动画的名字{}*/
		@keyframes one{
			0%{
				left: 0;
			}
			100%{
				left: 1000px;
			}
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>